



<template>
  <div class="app-container">
    <template>

      <router-link :to="'/systemManager/saverole'">
        <el-button type="primary" size="mini" icon="el-icon-edit"
        >添加角色</el-button>
      </router-link>
      <router-link :to="'/systemManager/authorization'">
        <el-button type="success" size="mini" icon="el-icon-user-solid"
        >角色授权
        </el-button>
      </router-link>
    </template>
    <el-table
      :data="roleList"
      style="width: 100%"
      :row-class-name="tableRowClassName">



      <el-table-column

        width="180">
      </el-table-column>
      <el-table-column
        type="selection"
        width="180">
      </el-table-column>
      <el-table-column label="编号" width="70" align="center">
        <!-- 插槽-->
        <!-- scope  代表范围，作用域是整个表格-->
        <template slot-scope="scope">
          {{ (current - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="rolename"
        label="角色名称"
        width="180"
        align="center">
      </el-table-column>

      <el-table-column label="操作" align="center" width="200">

        <template slot-scope="scope">
          <router-link :to="'/systemManager/edit/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit"
            >修改</el-button>
          </router-link>


          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeRole(scope.row.id)"
          >删除</el-button
          >
        </template>
      </el-table-column>
      <el-table-column

        width="140">
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total,prev, pager, next,jumper"
      :total="total"
      :current-page="current"
      :page-size="limit"
      style="padding: 30px 0; text-align: center"
      @current-change="getRoleList"
    >
    </el-pagination>
  </div>


</template>

<script>
// import userManagerApi from "@/api/RoleManager.js";
import  userManagerApi from  "@/api/RoleManager.js" ;

export default {
  name: "UserManager",
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    getRoleList(current =1) {
      this.current = current;
      userManagerApi
        .pageListRole(this.current, this.limit)
        .then((response) => {
          console.log("获取角色列表成功！");
          this.roleList = response.data.items;
          this.total = response.data.total;
          console.log(this.roleList);
          console.log(this.total);
        });
    },

    removeRole(id){
      if(id!=null){
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        userManagerApi.removeRoleById(id).then((response)=>{
          this.getRoleList()
          this.$message({
            type: "success",
            message: "删除成功!",
          });

        })
      })
    }else {
        this.$confirm("请选中记录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      }
    }

  },


  created() {
    this.getRoleList()
    // console.log(roleList)
  },

  data() {
    return {
      current: 1, //-- 当前页
      limit: 5, //-- 每页多少条
      roleList: null, //-- 角色列表
      total: 0, //-- 总记录数
      // role: {},
    }

  },





}
// const cityOptions = [];



</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
